<template>
  <div class="detail-container">
    <div class="top-wrapper">
      <div class="org-detail">
        <div class="avatar">
          <el-avatar shape="square" :size="80">LOGO</el-avatar>
        </div>
        <div class="org-info">
          <div class="i-top">
            <div class="t-left">
              <span class="title">{{detail.orgName}}</span>
              <!-- <el-tag effect="plain" class="tagItem" size="small" type="info"></el-tag> -->
            </div>
            <div class="t-right">
              <!-- <el-tag class="tagItem" size="small" type="danger"></el-tag>
              <el-tag class="tagItem" size="small" type="warning"></el-tag> -->
            </div>
          </div>
          <div class="info-detail label-color">
            <div>法定代表人：</div>
            <div>法定代表人身份证号：{{detail.legalIdCard}}</div>
            <div>统一社会信用代码：{{detail.unifiedCode}}</div>
          </div>
          <div class="info-detail label-color">
            注册地址：
          </div>
        </div>
      </div>
      <div class="tips">
        <div class="tip-box tip-box-b">
          申领场所码
          <span>{{detail.claimCsCount}}</span>
          个
        </div>
        <!-- <div class="tip-box tip-box-r">
          预警场所码
          <span>{{detail.warningCsCount}}</span>
          个
        </div>
        <div class="tip-msg">
          <i class="el-icon-user-solid"></i>场所码申领人：{{detail.applicantName}}
        </div> -->
      </div>
    </div>
    <div class="bottom-wrapper">
      <div class="code-list">
        <div class="list-title">申领场所码列表</div>
        <div class="list-wrapper">
          <div 
            v-for="(item,index) in detail.csInfoList" :key="item.id"
            :class="index==currentIndex?'list-item active-item':'list-item'" 
            @click="csmChange(item, index)"
          >
            <div class="title">
              {{item.csName}}
              <el-tag class="tagItem" size="mini">{{item.typeSecond}}</el-tag>
            </div>
            <div class="state">
              <el-tag class="tagItem" size="small" type="success">启用中 NO.{{item.id}}</el-tag>
            </div>
            <div class="addr label-color">
              <i class="el-icon-location"></i>{{item.fullAddress}}
            </div>
          </div>
        </div>
      </div>
      <div class="tabs-list">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="场所码" name="csm">
            <CsmMap 
              ref="map"
            />
            <div class="skeleton-box">
              <el-skeleton :loading="mapLoading" :rows="6" animated />
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="场所码统计" name="sta">
            <CsmStatistics />
          </el-tab-pane>
          <el-tab-pane label="场所管理人员" name="manager">
            <CsmManager />
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrgInfoDetail } from '@/http/apiUrls.js';
import CsmMap from '@/components/csmCom/csmManage/CsmMap.vue';
import CsmStatistics from '@/components/csmCom/csmManage/CsmStatistics.vue';
import CsmManager from '@/components/csmCom/csmManage/CsmManager.vue';

export default {
  name: 'OrgServiceDetail',
  components: {CsmMap, CsmStatistics, CsmManager},
  data() {
    return {
      mapLoading: true,
      currentIndex: 0,
      detail: {
        // id: 0,
        orgName: '', // 公司名
        legalIdCard: '', // 身份证
        unifiedCode: '', // 统一社会信用代码
        applicantPhone: '',
        claimCsCount: 0, //机构申领场所码数量
        warningCsCount: 0, // 机构预警场所码数量
        applicantName: '', //场所码初次申领人
        csInfoList: []
      },
      activeName: 'csm'
    }
  },
  mounted(){
    const id = this.$route.query.id
    this.getDetailData(id)
  },
  methods:{
    handleClick(tab, event) {
      console.log(tab);
    },
    getDetailData(id){
      // setTimeout(() => {
      //   this.$refs.map.setDetail(this.detail.csmItems[0])
      //   this.mapLoading = false
      // },2000); 
      let requestData = {
        // "token": token.get(), 
        "unifiedCode": id
      }
      this.$postJson(getOrgInfoDetail, requestData).then(res => {
        if(res){
          this.mapLoading = false
          this.detail = res;
          this.$refs.map.setDetail(this.detail.csInfoList[0])
        }
      })
    },
    csmChange(item , index){
      if(this.currentIndex == index){
        return;
      }
      this.currentIndex = index;
      this.$refs.map.changeMap(item)
    }
  }
}
</script>
<style lang="scss">
.tabs-list{
  padding-top: 10px;
  .el-tabs__nav-scroll{
    padding-left: 20px;
  }
  .el-tabs__item{
    font-size: 16px;
  }
}
</style>
<style lang="scss" scoped>
.detail-container{
  margin: 10px;
}
.top-wrapper{
  background: #fff;
  padding: 20px;

  .org-detail{
    display:flex;
    display: -webkit-flex;
  }

  .tips{
    display:flex;
    display: -webkit-flex;
    margin-top: 1.2rem;
    align-items: center;
  }
}

.org-info{
  flex: 1;
  margin-left: 1rem;
  
  .i-top{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;

    .title{
      font-weight: 700;
    }
    .tagItem{
      margin-left:1rem;
    }
  }
  .info-detail{
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    margin-top: 0.4rem;
    div:first-child{
      padding-right: 1rem;
    }
    div:not(:first-child){
      padding: 0 1rem;
      border-left: 1px solid #ced6e0;
    }
  }
}

.tip-box{
  width: 15rem;
  background-color: aliceblue;
  margin-right: 2.5rem;
  padding: 1rem;
  font-size: 14px;
}

.tip-box-b{
  border-left: 0.3rem solid #5584ff;
  span{
    color: #5584ff;
    font-size: 20px;
    font-weight: 900;
    margin: 0 1rem;
  }
}

.tip-box-r{
  border-left: 0.3rem solid #FD6565;
  span{
    color: #FD6565;
    font-size: 20px;
    margin: 0 1rem;
  }
}

.tip-msg{
  color: #5584ff;
  i{
    margin-right: 0.5rem;
  }
}

.bottom-wrapper{
  margin-top: 1rem;
  display: flex;
  display: -webkit-flex;

  .code-list{
    background: #fff;
    padding: 10px 15px;
    width: 300px;

    .list-title{
      padding-bottom: 1rem;
      // border-bottom: 1px solid #ced6e0;
      padding-top: 0.5rem;
      font-weight: 600;
    }
  }

  .tabs-list{
    margin-left: 0.9rem;
    flex: 1;
    background: #fff;
  }

}

.list-item{
  padding: 15px 10px;
  border: 1px solid #eee;
  border-radius: 2px;
  margin-bottom: 1rem;
  .title{
    font-weight: 600;
  }

  .state{
    margin: 0.8rem 0;
    font-size: 14px;
    // padding: 3px 15px;
    width: 100%;
    // background-color: #f1f2f6;
    border-radius: 10px;
  }

  .addr{
    font-size: 13px;
    
    i{
      margin-right: 0.5rem;
    }
  }
}

.list-item:hover{
  cursor: pointer;
  box-shadow:1px 1px 2px rgba(192,192,192,0.3),-1px -1px 2px rgba(192,192,192,0.3);
}

.list-wrapper > .active-item{
  box-shadow:1px 1px 2px rgba(192,192,192,0.3),-1px -1px 2px rgba(192,192,192,0.3);
}

.skeleton-box{
  padding: 20px;
}
</style>